<template>
	<!-- 完善信息 -->
	<view class="complete-information">
		<view class="complete-information-content">
			<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_bg.png" mode="widthFix"
				class="ty-vip">
			</image>
			<view class="content">
				<view class="content-block">
					<view class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_grgs@2x.png"
								mode="widthFix"></image>个人/公司
						</view>
						<view class="right">
							<radio-group @change="radioChange" class="radio-group">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in itemsTheme"
									:key="item.value">
									<view>
										<radio :value="item.value" :checked="index === current" color="#DB943C"
											style="transform:scale(0.8)" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_tx@2x.png"
								mode="widthFix"></image>头像
						</view>
						<view class="right">
							<button open-type="chooseAvatar" @chooseavatar="changeAvatar" class="avatar-w">
								<image v-if="form.avatar" :src="form.avatar" mode="aspectFill" class="avatar"></image>
								<image v-if="!form.avatar"
									src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_menu3.png"
									mode="widthFix" class="revise"></image>

								<!-- 	<view class="change-text">
									<image src="/static/images/revise.svg" mode="widthFix" ></image>
								</view> -->
							</button>

						</view>
					</view>
					<view v-if="current === 0" class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_name@2x.png"
								mode="widthFix"></image>姓名
						</view>
						<view class="right">
							<input type="text" v-model="form.realName" placeholder="请输入真实的姓名" />
						</view>
					</view>
					<view v-if="current !== 0" class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_name@2x.png"
								mode="widthFix"></image>联系人姓名
						</view>
						<view class="right">
							<input type="text" v-model="form.realName" placeholder="请输入真实的姓名" />
						</view>
					</view>
					<view class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_cs@2x.png"
								mode="widthFix"></image>您所在城市
						</view>
						<view class="right">
							<uni-data-picker style="flex: 1;" :clear-icon="false" :localdata="items"
								v-model="form.addressArray" popup-title="请选择地址" @change="onAddress"
								@nodeclick="onnodeclick"></uni-data-picker>
							<uni-icons type="right" size="17" color="#adadad"></uni-icons>
						</view>
					</view>
					<view v-if="current !== 0" class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_wdgs@2x.png"
								mode="widthFix"></image>我的公司
						</view>
						<view class="right">
							<input type="text" v-model="form.companyName" placeholder="请输入我的公司" />
						</view>
						<view v-if="suggestionShow" class="suggestions">
							<view class="suggestions-row" v-for="(suggestion, index) in companySuggestions" :key="index"
								@click="suggestionClick(suggestion)">
								{{ suggestion.companyName }}
							</view>
						</view>
					</view>
					<view v-if="current !== 0" class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_wdzw@2x.png"
								mode="widthFix"></image>职务
						</view>
						<view class="right">
							<picker mode="selector" :range="positions" @change="onPositionChange">
								<view class="picker">
									<input type="text" disabled v-model="form.userPosition" placeholder="请选择职务" />
									<uni-icons type="right" size="17" color="#adadad"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
					<view class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_cysj@2x.png"
								mode="widthFix"></image>从业时间
						</view>
						<view class="right">
							<picker mode="date" fields="month" :start="'2000-01'" :end="endDate"
								@change="calculateWorkYears">
								<view class="picker">
									<input type="text" disabled v-model="form.workYear" placeholder="请选择" />
									<uni-icons type="right" size="17" color="#adadad"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
					<view class="row">
						<view class="left">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wsxx_wxh@2x.png"
								mode="widthFix"></image>微信号
						</view>
						<view class="right">
							<input type="text" v-model="form.wxOpenId" placeholder="请输入微信号" />
						</view>
					</view>
					<!-- 	<view class="row">
						<view class="left">我有资源，申请成为服务商</view>
						<view class="right">
							<switch :checked="form.source == 0 ? false:true" @change="switchChange"
								style="transform:scale(0.8)" />
							</switch>
						</view>
					</view> -->
				</view>
				<view class="ywfw">
					<!-- <view class="text">您的核心业务（可多选）</view> -->
					<view class="content-block">
					<view class="ywfw-title">产品资源</view>
					<view class="ywfw-wrapper">
						<view class="block" v-for="(item, index) in cpzyData" :key="index" @click="cpzyClick(item)"
							:class="item.active?'active':''">{{item.text}}</view>
					</view>
					</view>
					<view class="content-block">
					<view class="ywfw-title">行业服务</view>
					<view class="ywfw-wrapper">
						<view class="block" v-for="(item, index) in hyfwData" :key="index" @click="hyfwClick(item)"
							:class="item.active?'active':''">{{item.text}}</view>
					</view>
				</view>
				</view>
				<view class="tip-text">
					<text>提示：请勿发布虚假信息，并保证对所发布信息的真实性负全责</text>
				</view>
				<button class="public-btn" @click="nextStepClick()" :class="{ active: isBtnActive }"
					@touchstart="isBtnActive = true" @touchend="isBtnActive = false">确定</button>
			</view>
		</view>

	</view>
</template>

<script>
	import PcaCode from '../../api/pca-code.json' //  地址
	import Zyyw from '../../api/zyyw.json' // 产品资源
	import Hyfw from '../../api/hyfw.json' // 行业服务
	import {
		parseDate
	} from '@/utils/date.js';

	export default {
		data() {
			return {
				form: {
					acountId: '', // 手机号码
					avatar: '', // 头像
					realName: '', // 姓名
					address: '', // 地址
					addressArray: [], // 地址
					province: '', // 省联系地址
					city: '', // 市联系地址
					area: '', // 区联系地址
					workYear: '', // 从业时间(将存储为 "x年x月")
					workStartDate: '', // 存储实际选择的日期
					wxOpenId: '', // 微信号
					companyName: '', // 公司
					userPosition: '', // 职务
					source: 0, // 是否是服务商 0 不是  1 是
					userScope: [], // 业务范围
					authEndTime: null, // 体验vip结束时间
					authEndTimeCn: null, // 体验vip结束时间中文
					createTimeCn: '', // 创建时间中文
				},
				cpzyActiveData: [], // 产品资源选中的文字数组
				hyfwActiveData: [], // 行业服务选中的文字数组
				itemsTheme: [{
						value: 'gr',
						name: '个人',
					},
					{
						value: 'gs',
						name: '公司'
					}
				],
				current: 0, // 当前选中的个人或公司
				items: PcaCode,
				activeArrey: [], // 选中的地址
				userScopeData: [], // 业务范围
				cpzyData: Zyyw, // 产品资源
				hyfwData: Hyfw, // 行业服务
				suggestionShow: false,
				companySuggestions: [], // 公司名称模糊查询结果
				disableWatch: false, // 标志位
				isBtnActive: false,
				positions: ['创始人/股东', '高管/总监', '团队主管', '客户经理', '独立经纪人'], // 职务选项	
				isLoggedIn: false, // 添加登录状态
				userGuid: '', // 添加guid字段
				endDate: '', // 当前日期，用于限制日期选择
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad() {
			// 页面加载时检查登录状态
			this.isLoggedIn = this.$store.state.user.isLoggedIn;
			if (this.isLoggedIn) {
				// 如果已登录，填充表单数据
				const user = this.userInfo;
				console.log('user', user)
				this.userGuid = user.guid;
				this.form = {
					...this.form,
					acountId: user.acountId,
					avatar: user.avatar,
					realName: /^1[3-9]\d{9}$/.test(user.realName) ? '' : user.realName,
					address: user.province + user.city + user.area,
					province: user.province,
					city: user.city,
					area: user.area,
					workYear: user.workYear,
					wxOpenId: user.wxOpenId,
					companyName: user.companyName,
					userPosition: user.userPosition,
					source: user.source,
					userScope: user.userScope || [],
					workStartDate: user.workStartDate,
					authEndTime: user.authEndTime,
					authEndTimeCn: user.authEndTimeCn,
					createTimeCn: user.createTimeCn,
				};

				// 设置地址选择器的选中状态
				this.$nextTick(() => {
					this.setAddressPickerValue(user.province, user.city, user.area);
				});

				// 根据userScope设置产品资源和行业服务的选中状态
				if (user.userScope && user.userScope.length > 0) {
					// 设置产品资源选中状态
					this.cpzyData.forEach(item => {
						if (user.userScope.includes(item.text)) {
							item.active = true;
							this.cpzyActiveData.push(item.text);
						}
					});

					// 设置行业服务选中状态
					this.hyfwData.forEach(item => {
						if (user.userScope.includes(item.text)) {
							item.active = true;
							this.hyfwActiveData.push(item.text);
						}
					});
				}
			}

			// 设置结束日期为当前日期
			const now = new Date()
			const year = now.getFullYear()
			const month = (now.getMonth() + 1).toString().padStart(2, '0')
			this.endDate = `${year}-${month}`
		},
		watch: {
			'form.companyName': function(newVal) {
				if (this.disableWatch) {
					this.disableWatch = false;
					return;
				}
				if (newVal && newVal.length > 3) {
					this.fetchCompanySuggestions(newVal);
					// console.log(11)
					// this.suggestionShow = true
					// this.companySuggestions = [{
					// 	companyName: '数脉空间（苏州）科技有限公司',
					// 	creditNo: '91320507MA21U6DX4H'
					// }, {
					// 	companyName: '数脉空间（苏州）科技有限公司2',
					// 	creditNo: '91320507MA21U6DX4H'
					// }]
				} else {
					this.companySuggestions = [];
				}
			}
		},
		methods: {
			// 单选框
			radioChange: function(evt) {
				for (let i = 0; i < this.itemsTheme.length; i++) {
					if (this.itemsTheme[i].value === evt.detail.value) {
						this.current = i;
						console.log(this.current)
						break;
					}
				}
			},
			// 头像
			async changeAvatar(e) {
				const avatarUrl = e.detail.avatarUrl;
				try {
					// 压缩图片
					const compressedRes = await uni.compressImage({
						src: avatarUrl,
						quality: 80,
						width: 200,
						height: 200,
					});

					if (!compressedRes || !compressedRes.tempFilePath) {
						throw new Error('压缩后的图片路径无效');
					}

					// 将压缩后的图片转换为base64
					const res = await new Promise((resolve, reject) => {
						try {
							const base64 = uni.getFileSystemManager().readFileSync(compressedRes.tempFilePath,
								'base64');
							resolve(base64);
						} catch (error) {
							console.error('文件读取失败:', error);
							reject(new Error('文件读取失败'));
						}
					});

					if (!res) {
						throw new Error('base64转换失败');
					}

					this.form.avatar = 'data:image/png;base64,' + res;

					// 上传成功后显示提示
					uni.showToast({
						title: '头像上传成功',
						icon: 'success'
					});

				} catch (error) {
					console.error('头像处理失败:', error);
					uni.showToast({
						title: error.message || '头像处理失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},
			// 职务选择
			onPositionChange(e) {
				this.form.userPosition = this.positions[e.detail.value];

			},
			// 选择成为服务商
			switchChange: function(e) {
				if (e.detail.value == true) {
					this.form.source = 1
				} else {
					this.form.source = 0
				}
			},
			// 产品资源点击
			cpzyClick(item) {
				// 如果是选中操作，先检查总数是否超过6个
				if (!item.active) {
					const totalSelected = this.cpzyActiveData.length + this.hyfwActiveData.length;
					if (totalSelected >= 6) {
						uni.showToast({
							title: '最多只能选择6个业务范围',
							icon: 'none'
						});
						return;
					}
				}
				
				item.active = !item.active;
				if (item.active) {
					this.cpzyActiveData.push(item.text);
				} else {
					const index = this.cpzyActiveData.findIndex(text => text === item.text);
					if (index > -1) {
						this.cpzyActiveData.splice(index, 1);
					}
				}
			},
			// 行业服务点击
			hyfwClick(item) {
				// 如果是选中操作，先检查总数是否超过6个
				if (!item.active) {
					const totalSelected = this.cpzyActiveData.length + this.hyfwActiveData.length;
					if (totalSelected >= 6) {
						uni.showToast({
							title: '最多只能选择6个业务范围',
							icon: 'none'
						});
						return;
					}
				}
				
				item.active = !item.active;
				if (item.active) {
					this.hyfwActiveData.push(item.text);
				} else {
					const index = this.hyfwActiveData.findIndex(text => text === item.text);
					if (index > -1) {
						this.hyfwActiveData.splice(index, 1);
					}
				}
			},
			// 地址选择
			onAddress(e) {
				console.log(e.detail.value)
				this.form.province = e.detail.value[0].text
				this.form.city = e.detail.value[1].text
				this.form.area = e.detail.value[2].text
				this.form.address = this.form.province + this.form.city + this.form.area
				console.log(this.form.address)
			},
			// 地址取消
			onnodeclick(node) {

			},
			// 从业时间选择
			calculateWorkYears(e) {
				const startDate = parseDate(e.detail.value);
				const now = new Date();

				// 计算工作年限
				let years = now.getFullYear() - startDate.getFullYear();
				let months = now.getMonth() - startDate.getMonth();

				if (months < 0) {
					years--;
					months += 12;
				}

				// 格式化显示
				let workYearText = '';
				if (years > 0) {
					workYearText += `${years}年`;
				}
				if (months > 0) {
					workYearText += `${months}个月`;
				}

				// 更新表单数据
				this.form.workYear = workYearText;
				this.form.workStartDate = e.detail.value;
			},
			// 获取公司名称模糊查询结果
			async fetchCompanySuggestions(keyword) {
				try {
					const response = await uni.request({
						url: 'https://businessfuzzy.shumaidata.com/getbusinessfuzzy',
						method: 'GET',
						header: {
							Authorization: 'APPCODE 754d13cfa2f44542a27e7e1b40f71f01'
						},
						data: {
							keyword: keyword,
							pageSize: '6'
						}
					});
					if (response.data.code === 200) {
						this.companySuggestions = response.data.data.data;
						this.suggestionShow = true
					} else {
						this.companySuggestions = [];
						this.suggestionShow = false
					}
				} catch (error) {
					this.companySuggestions = [];
					this.suggestionShow = false
				}
			},
			// 公司名称模糊查询结果点击
			suggestionClick(item) {
				this.disableWatch = true;
				this.form.companyName = item.companyName;
				this.suggestionShow = false
				this.companySuggestions = []
			},
			// 下一步
			async nextStepClick() {
				if (this.current == 0) { // 个人
					// 如果是个人，且公司名称或职业有值，则清空
					if (this.form.companyName || this.form.userPosition) {
						this.form.companyName = '';
						this.form.userPosition = '';
					}

					if (!this.form.realName) {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						});
						return false;
					}
					// 验证姓名长度
					if (this.form.realName.length < 2 || this.form.realName.length > 6) {
						uni.showToast({
							title: '姓名长度必须在2-6个字之间',
							icon: 'none'
						});
						return false;
					}
					// 验证姓名是否包含非文字字符
					if (!/^[\u4e00-\u9fa5]+$/.test(this.form.realName)) {
						uni.showToast({
							title: '姓名只能包含中文字符',
							icon: 'none'
						});
						return false;
					}
				} else { // 公司
					if (!this.form.realName) {
						uni.showToast({
							title: '请输入联系人姓名',
							icon: 'none'
						});
						return false;
					}
					// 验证联系人姓名长度
					if (this.form.realName.length < 2 || this.form.realName.length > 6) {
						uni.showToast({
							title: '联系人姓名长度必须在2-6个字之间',
							icon: 'none'
						});
						return false;
					}
					// 验证联系人姓名是否包含非文字字符
					if (!/^[\u4e00-\u9fa5]+$/.test(this.form.realName)) {
						uni.showToast({
							title: '联系人姓名只能包含中文字符',
							icon: 'none'
						});
						return false;
					}
					if (!this.form.companyName) {
						uni.showToast({
							title: '请输入我的公司',
							icon: 'none'
						});
						return false;
					}
					if (!this.form.userPosition) {
						uni.showToast({
							title: '请选择职务',
							icon: 'none'
						});
						return false;
					}
				}
				if (!this.form.avatar) {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.workYear) {
					uni.showToast({
						title: '请选择从业时间',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.wxOpenId) {
					uni.showToast({
						title: '请输入微信号',
						icon: 'none'
					});
					return false;
				}
				// 合并产品资源和行业服务到userScope
				this.form.userScope = [...this.cpzyActiveData, ...this.hyfwActiveData];

				if (this.form.userScope.length < 1) {
					uni.showToast({
						title: '请选择业务范围',
						icon: 'none'
					});
					return false;
				}
				if (this.userInfo.srStatus === '1' && this.form.realName !== this.userInfo.realName) {
					uni.showModal({
						title: '提示',
						content: '您已实名认证，修改姓名将取消实名认证，是否继续？',
						success: (res) => {
							if (res.confirm) {
								this.form.idNum = '', // 身份证号
									this.form.srStatus = '0', // 0:未实人 1:实人
									this.submit()
							}
						}
					});
				} else {
					this.submit()
				}
			},
			// 提交
			async submit() {
				this.form.acountId = this.userInfo.acountId
				const requestData = {
					...this.form,
					guid: this.isLoggedIn ? this.userGuid : null
				};

				// 如果是第一次注册，设置体验vip结束时间
				if (this.form.authEndTime === null && this.form.authEndTimeCn === null) {
					// 获取当前时间
					const now = new Date();
					
					// 计算24小时后的时间
					const oneDayLater = new Date(now.getTime() + 24 * 60 * 60 * 1000);
					
					// 格式化英文时间 (MM/DD/YYYY HH:mm AM/PM)
					const enMonth = String(oneDayLater.getMonth() + 1).padStart(2, '0');
					const enDay = String(oneDayLater.getDate()).padStart(2, '0');
					const enYear = oneDayLater.getFullYear();
					const enHours = oneDayLater.getHours();
					const enMinutes = String(oneDayLater.getMinutes()).padStart(2, '0');
					const enAmPm = enHours >= 12 ? 'PM' : 'AM';
					const enFormattedHours = enHours % 12 || 12;
					
					// 格式化中文时间 (YYYY-MM-DD HH:mm:ss)
					const cnMonth = String(oneDayLater.getMonth() + 1).padStart(2, '0');
					const cnDay = String(oneDayLater.getDate()).padStart(2, '0');
					const cnYear = oneDayLater.getFullYear();
					const cnHours = String(oneDayLater.getHours()).padStart(2, '0');
					const cnMinutes = String(oneDayLater.getMinutes()).padStart(2, '0');
					const cnSeconds = String(oneDayLater.getSeconds()).padStart(2, '0');
					
					// 设置体验vip结束时间
					// 使用iOS支持的日期格式
					const iosFormatDate = `${cnYear}-${cnMonth}-${cnDay}T${cnHours}:${cnMinutes}:${cnSeconds}`;
					requestData.authEndTime = `${enMonth}/${enDay}/${enYear} ${enFormattedHours}:${enMinutes} ${enAmPm}`;
					requestData.authEndTimeCn = iosFormatDate;
				}
				const res = await this.$api.infoLogin(requestData);
				if (res.succ) {
					this.$store.dispatch('user/setUserInfo', res.data);
					this.$store.dispatch('user/setLoginStatus', true);
					uni.showToast({
						title: '信息更新成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 200);
				} else {
					uni.showToast({
						title: res.message || '操作失败，请重试',
						icon: 'none'
					});
				}
			},
			// 设置地址选择器值
			setAddressPickerValue(province, city, area) {
				const provinceNode = this.items.find(item => item.text === province);
				if (provinceNode) {
					const cityNode = provinceNode.children.find(item => item.text === city);
					if (cityNode) {
						const areaNode = cityNode.children.find(item => item.text === area);
						if (areaNode) {
							this.activeArrey = [provinceNode, cityNode, areaNode];
							this.form.addressArray = [provinceNode, cityNode, areaNode];
						}
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.complete-information {
		position: relative;
		padding: 0 30rpx;
       	background: linear-gradient( 180deg, #FAEBDB 0%, rgba(255,247,238,0) 400rpx);

		.complete-information-content {
			z-index: 2;
			position: relative;
			display: flex;
			flex-direction: column;
		}

		.ty-vip {
			width: 100%;
			margin-top: 20rpx;
		}

		.content {
			.content-block {
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-top: 40rpx;
			}

			.row {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// &:after {
				// 	content: '';
				// 	position: absolute;
				// 	bottom: 0;
				// 	left: 0;
				// 	width: 100%;
				// 	height: 1px;
				// 	background-color: #e8e8e8;
				// 	transform: scaleY(0.5);
				// }

				.left {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					padding: 35rpx 0;
					color: #333;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 16rpx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					overflow: hidden;

					input {
						width: 100%;
						border: 0;
						text-align: right;
						font-size: 32rpx;
						color: #333;
					}

					.avatar-w {
						width: 64rpx;
						height: 64rpx;
						line-height: 1;
						position: relative;
						border-radius: 100%;
						margin: 0;
						padding: 0;

						.revise {
							width: 64rpx;
							height: 64rpx;
							border-radius: 100%;
						}

						.change-text {
							position: absolute;
							left: 50%;
							top: 5rpx;
							transform: translateX(-50%);
							display: flex;
							flex-direction: column;
							align-items: center;
							font-size: 22rpx;
							color: #fff;
							opacity: .7;

							.revise {
								width: 50rpx;
								margin-bottom: 5rpx;
							}
						}
					}

					.avatar {
						width: 64rpx;
						height: 64rpx;
						border-radius: 100%;
					}

					.picker {
						width: 100%;
						display: flex;
						align-items: center;

						input {
							flex: 1;
							margin-right: 10rpx;
						}

					}

					.input-value-border {
						border: 0;

						.selected-area {
							justify-content: flex-end;
							padding-right: 3rpx;
						}

						.arrow-area {
							display: none;
						}

						.selected-list {
							justify-content: flex-end;
						}

						.placeholder {
							font-size: 30rpx;
						}

						.text-color {
							color: #000;
						}
					}

					.radio-group {
						display: flex;
						align-items: center;

						.uni-list-cell {
							display: flex;
							align-items: center;
							margin-left: 30rpx;
							font-size: 30rpx;
						}
					}
				}

				// 联系人姓名模糊查询结果
				.suggestions {
					z-index: 9999;
					position: absolute;
					top: 137rpx;
					left: 0;
					right: 0;
					background: #fff;
					box-shadow: 0 0 5px 5px rgba(100, 100, 100, .1);
					border-radius: 5px;

					.suggestions-row {
						padding: 30rpx;
						font-size: 28rpx;
						border-bottom: 1px solid #f0f0f0;

						&:last-child {
							border-bottom: none;
						}
					}
				}
			}

			.ywfw {
				// margin-top: 30rpx;

				.text {
					font-size: 30rpx;
					padding: 40rpx 0;
				}

				.ywfw-title {
					position: relative;
					font-size: 36rpx;
					padding: 20rpx 0 20rpx 30rpx;
					color: #333;
					font-weight: bold;
					&::after {
						content: '';
						position: absolute;
						top: 30rpx;
						left: 0;
						width: 6rpx;
						height: 32rpx;
						background-color: #E6B26D;
					}
				}

				.ywfw-wrapper {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.block {
						min-width: 123rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						padding: 15rpx 10rpx;
						background: #FFEFD9;
						border-radius: 10rpx;
						color: #AC6C17;
						font-size: 28rpx;
						text-align: center;
						border-radius: 10rpx 10rpx 10rpx 10rpx;

						&:nth-child(4n) {
							margin-right: 0;
						}

						&.active {
							color: #fff;
							background: linear-gradient( 135deg, #F3B359 0%, #EC6A34 100%);
							border-radius: 10rpx 10rpx 10rpx 10rpx;
						}
					}

				}
			}

			.tip-text {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 30rpx 0;
				padding: 20rpx;
				background: #FFF7EE;
				border-radius: 20rpx;

				text {
					margin-left: 10rpx;
					font-size: 30rpx;
					color: #AC6C17;
				}
			}
		}
	}
</style>